import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Card } from 'antd';
import React, { useRef } from 'react';
import { useModel } from 'umi';

import * as api from '@/services/userLoginLog';
import * as utils from '@/utils/utils';

const getLoginInfo = (user: API.UserLoginLog) => {
  let info = '';
  info += `${user.country} ${user.province} ${user.city}`;
  if (user.net && user.net.indexOf('内网') == -1) {
    info += ` [${user.net}]`;
  }

  return info;
};

export type UserLoginLogTableProps = {
  accountKey: string;
};

const UserLoginLogTable: React.FC<UserLoginLogTableProps> = (props) => {
  const { accountKey } = props;

  const actionRef = useRef<ActionType>();
  const { getProduct } = useModel('useGlobalModel', (model) => ({
    getProduct: model.getProduct,
  }));

  let columns: ProColumns<API.UserLoginLog>[] = [
    {
      title: '状态',
      align: 'center',
      width: 80,
      dataIndex: 'failed',
      sorter: true,
      valueEnum: {
        true: { status: 'Error', text: '' },
        false: { status: 'Success', text: '' },
      },
    },
    {
      title: '产品',
      align: 'center',
      width: 100,
      dataIndex: 'productId',
      sorter: true,
      renderText: (_, record) => {
        if (record.productId) {
          const product = getProduct(record.productId);
          if (product) {
            return product.name;
          }
        }
        return '';
      },
    },
    {
      title: '类型',
      align: 'center',
      width: 80,
      dataIndex: 'type',
      sorter: true,
      renderText: (val: string) => {
        return val.toUpperCase();
      },
    },
    {
      title: '用户名',
      dataIndex: 'username',
      sorter: true,
    },
    {
      title: '平台',
      // align: 'center',
      width: 130,
      dataIndex: 'platform',
      sorter: true,
    },
    {
      title: '版本',
      align: 'center',
      width: 60,
      dataIndex: 'ver',
      sorter: true,
    },
    {
      title: '时区',
      align: 'center',
      width: 80,
      dataIndex: 'timezone',
      sorter: true,
    },
    {
      title: '语言',
      align: 'center',
      width: 80,
      dataIndex: 'lang',
      sorter: true,
    },
    {
      title: '渠道',
      // align: 'center',
      width: 100,
      dataIndex: 'channel',
      sorter: true,
    },
    {
      title: '设备ID',
      dataIndex: 'deviceid',
      sorter: true,
    },
    {
      title: '设备型号',
      dataIndex: 'deviceModel',
      sorter: true,
    },
    {
      title: '设备系统',
      dataIndex: 'deviceOs',
      sorter: true,
    },
    {
      title: '时间',
      align: 'center',
      dataIndex: 'logTime',
      sorter: true,
      renderText: (_, record) => {
        return utils.formatUtcToLocal(record.logTime);
      },
    },
    {
      title: 'IP',
      align: 'center',
      width: 120,
      dataIndex: 'ip',
      sorter: true,
    },
    {
      title: '位置',
      render: (_, record) => {
        return (
          <>
            <span>{getLoginInfo(record)}</span>
          </>
        );
      },
    },
    {
      title: '错误信息',
      dataIndex: 'failedMessage',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '服务器',
      dataIndex: 'server',
      sorter: true,
    },
  ];

  return (
    <Card style={{ marginTop: 20, minHeight: 200 }} title="登录日志">
      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        columns={columns}
        search={false}
        toolBarRender={false}
        pagination={{
          defaultPageSize: 15,
          pageSizeOptions: ['15', '30', '60', '100'],
          hideOnSinglePage: true,
          // current: pageCurrent,
          // total: totalCount,
        }}
        params={{ accountKey }}
        request={api.loginlist}
      />
    </Card>
  );
};

export default UserLoginLogTable;
